<template>
    <div id="login_window">
        <!-- <p style="margin-top: 0;">dd</p> -->
        <p id="login_title">欢迎来到登录页面</p>
        <div id="login_form">
            <el-form v-model="login_form" label-width="80px">
                <el-form-item label="您的ID">
                    <el-input label="ID" placeholder="请输入您的ID" v-model="login_form.user_id">
                    </el-input>
                </el-form-item>
                <el-form-item label="您的密码">
                    <el-input label="ID" placeholder="请输入您的密码" v-model="login_form.user_password" type="password"
                              show-passowrd>
                    </el-input>
                </el-form-item>
                <el-button type="primary" style="width: 200px;margin: auto;" v-bind:loading="isLogining"
                           @click="clickLogin"
                           round>{{ loginButtonMessage }}
                </el-button>
            </el-form>
        </div>
        <div id="login_footer">
            <p style="margin: auto;">@Keven 2020</p>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'

    export default {
        name: "login",
        data: function () {
            return {
                login_form: {
                    user_id: "",
                    user_password: ""
                },
                isLogining: false,
                loginButtonMessage: "点击登录"
            }
        },
        methods: {
            /*
                点击进行登录
             */
            clickLogin: function () {
                // console.log(this.login_form);
                this.isLogining = true;
                this.loginButtonMessage = "登录中";

                var _this = this;
                axios
                    .get("http://127.0.0.1:8000/api/login/", {
                        params: {
                            user_name: _this.login_form.user_id,
                            user_password: _this.login_form.user_password
                        }
                    })
                    .then(function (response) {
                        if (response.data.status === 0) {
                            // console.log("这是登录成功之后的操作");
                            // console.log(response);
                            _this.$store.commit("setUserId", response.data.data.user_id);
                            _this.$store.commit("setUserName", response.data.data.user_name);
                            _this.$store.commit("setUserType", response.data.data.user_type);
                            _this.isLogining = false;
                            _this.loginButtonMessage = "点击登录";
                            _this.$router.push("./main");
                        } else {
                            _this.$message.error("登录失败，出现错误");
                        }
                        _this.isLogining = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        },
        mounted: function () {
        }
    }
</script>

<style>
    #login_form {
        width: 300px;
        height: 170px;
        margin: auto;
        border-radius: 16px;
        border-style: solid;
        border-width: 1px;
        border-color: white;
        background-color: white;
        padding: 16px;
    }

    #login_window {
        margin: 0;
        width: 100%;
        height: 100%;
        background-image: url(../../public/background.jpg);
        background-size: cover;
    }

    #login_title {
        margin-top: 0;
        padding-top: 100px;
        font-size: 48px;
        color: white;
    }

    #login_footer {
        position: fixed;
        bottom: 20px;
        color: white;
        text-align: center;
        width: 100%;
    }
</style>
